<template>
  <view class="Mall4j container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <view class="back_fff box_26_1">
      <!-- <view :style={height:top_height} class="back_fff box_26_2" v-if="box_26_is"></view> -->
      <!-- <view :style={height:top_height} class="back_fff box_26_2"></view> -->
      <view class="box_26 topBanner">
        <view class="align-center  hig40 " :style="{ paddingTop: paddingTop }" ref="searchBar">
          <image @tap="onNewsPage" mode="aspectFill" class="label_2" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNGb7c4d4b6cd3d72b70a1f407eb2816b8b.png" />
          <view class="box_27 flex-row" @tap="toSearchPage" :style="{ height: height_ ,lineHeight: height_ }">
            <image mode="aspectFill" class="thumbnail_5" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG604a7eb1aa21429bdd06e3529c862a7b.png" />
            <text class="text_70">搜索您喜欢的物品</text>
          </view>
          <image @tap="go_chat" mode="aspectFill" class="label_3" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNGabd30a609645f0745dd0bf96a6298b18.png" />

        </view>
        <view class="hig40_1">

        </view>
        <swiper style="height: 70%;margin-top: 10rpx" v-if="indexImgs.length" :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval" :duration="duration" :indicator-active-color="indicatorActiveColor" :circular="true" class="pic_swiper" indicator-dots previous-margin="10rpx" next-margin="10rpx">
          <block v-for="(item, seq) in indexImgs" :key="seq">
            <swiper-item class="banner_item">
              <view class="img_box">
                <image mode="aspectFill" :src="item.imgUrl" :data-prodid="item.relation" :data-type="item.type" class="banner_" @tap="toIndexImgContent" />
              </view>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <!-- <view v-if="news.length" class="message-play" @tap="onNewsPage">
        <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/horn.png" class="hornpng" />
        <swiper :vertical="true" :autoplay="true" :circular="true" duration="1000" class="swiper-cont">
          <block v-for="(item, id) in news" :key="id">
            <swiper-item class="items">{{ item.title }}
            </swiper-item>
          </block>
        </swiper>
        <text class="arrow" style="    top: 37rpx;" />
      </view> -->
      <view class="list_1 flex-row back_fff">
        <!-- <view class="image-text_1 flex-col justify-between" v-for="(item, index) in loopData0" :key="index" @click="go_callBack(item)">
          <image mode="aspectFill" class="image_1" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
          <text class="text-group_1">{{ item.lanhutext0 }}</text>
        </view> -->
      </view>
      <!-- <view class="justify-center width_100 back_fff">
        <image mode="aspectFill" class="image_2" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/dhsc_img.png" />
      </view> -->
    </view>

    <view class="section_1 flex-col"></view>
    <view style="padding: 24rpx 33rpx 0; " class="back_fff">
      <view class=" floor_2">
        <view class="justify-between" style="height: 326rpx;">
          <view class="w50_">
            <view class="section_2 flex-row" @tap="go_sub_category(79,254)">
              <view class="box_2 flex-col justify-between">
                <view class="box_3 flex-row justify-between">
                  <text class="text_1">运动专区</text>
                  <!-- <view class="text-wrapper_1 flex-col">
                    01:06:22
                  </view> -->
                </view>
                <text class="text_3 color_1">享全网低价购买</text>
              </view>
              <text class="arrow" style="  top: 15rpx;  right: -34rpx;" />
            </view>
            <view class="image-wrapper_1 flex-row">
              <view class="wrapper_1_view" v-for="(prod, index) in loopData3" :key="index">
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-if="prod.pic" :src="prod.pic" @tap="toProdPage_1(prod.prodId)" />
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                <text class="text_21 clamp_text"><text class="font_size_20">￥</text><text class="font_weight_6">{{ wxs.parsePrice(prod.price)[0] }}.</text><text class="font_size_20">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
              </view>
            </view>
          </view>
          <view class="w50_ rig5">
            <view class="section_2 flex-row" data-sts="0" data-id="1" data-title="畅销产品" @tap="toClassifyPage">
              <view class="box_2 flex-col justify-between">
                <view class="box_3 flex-row justify-between">
                  <text class="text_1">畅销产品</text>
                </view>
                <text class="text_3 color_2">每天都有好物上新</text>
              </view>
              <text class="arrow" style=" top: 15rpx;  right: -34rpx;" />
            </view>
            <view class="image-wrapper_1 flex-row ">
              <view class="wrapper_1_view" v-for="(prod, index) in loopData1_1" :key="index" :data-prodid="prod.prodId" @tap="toProdPage">
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-if="prod.pic" :src="prod.pic" />
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                <text class="text_21 clamp_text"><text class="font_size_20">￥</text><text class="font_weight_6">{{ wxs.parsePrice(prod.price)[0] }}.</text><text class="font_size_20">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
              </view>
            </view>
          </view>
        </view>
        <view class="justify-between" style="height: 326rpx;">
          <view class="w50_">
            <view class="section_2 flex-row" @tap="go_sub_category(91,296)">
              <view class="box_2 flex-col justify-between">
                <view class="box_3 flex-row justify-between">
                  <text class="text_1">大牌推荐</text>
                </view>
                <text class="text_3 color_3">大品牌值得信赖</text>
              </view>
              <text class="arrow" style=" top: 15rpx;  right: -34rpx;" />
            </view>
            <view class="image-wrapper_1 flex-row">
              <view class="wrapper_1_view" v-for="(prod, index) in loopData4" :key="index" @tap="toProdPage_1(prod.prodId)">
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-if="prod.pic" :src="prod.pic" />
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                <text class="text_21 clamp_text"><text class="font_size_20">￥</text><text class="font_weight_6">{{ wxs.parsePrice(prod.price)[0] }}.</text><text class="font_size_20">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
              </view>
            </view>
          </view>
          <view class="w50_ rig5">
            <view class="section_2 flex-row">
              <view class="box_2 flex-col justify-between" @tap="go_sub_category(30,31)">
                <view class="box_3 flex-row justify-between">
                  <text class="text_1">今日爆款</text>

                </view>
                <text class="text_3 color_4">大家都在抢购的爆品好物</text>
              </view>
              <text class="arrow" style=" top: 15rpx;  right: -34rpx; " />
            </view>
            <view class="image-wrapper_1 flex-row">
              <view class="wrapper_1_view" v-for="(prod, index) in loopData5" :key="index" @tap="toProdPage_1(prod.prodId)">
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-if="prod.pic" :src="prod.pic" />
                <image mode="aspectFill" class="image_3" referrerpolicy="no-referrer" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                <text class="text_21 clamp_text"><text class="font_size_20">￥</text><text class="font_weight_6">{{ wxs.parsePrice(prod.price)[0] }}.</text><text class="font_size_20">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
              </view>
            </view>
          </view>
        </view>

      </view>

    </view>

    <view class="floor_3">
      <view class="box_5 flex-row">
        <view class="section_4 flex-col">
          <view class="text-wrapper_2 flex-row justify-between">
            <text class="text_10" data-comment="好物推荐">好物推荐</text>
            <text class="text_11" data-sts="0" data-id="3" data-title="精品推荐" @tap="toClassifyPage">更多</text>
          </view>
          <view class="group_1 flex-col">
            <view class="list_2 flex-row">
              <view class="image-text_2 flex-col justify-between" v-for="(prod, index) in loopData1" :key="index" :data-prodid="prod.prodId" @tap="toProdPage">
                <image mode="aspectFill" class="image_11" referrerpolicy="no-referrer" v-if="prod.pic" :src="prod.pic" />
                <image mode="aspectFill" class="image_11" referrerpolicy="no-referrer" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                <text class="text-group_5 clamp_text_2">{{ prod.prodName }}</text>
                <view>
                  <text class="text_12 clamp_text"><text class="font_size_20">￥</text><text class="font_weight_6">{{ wxs.parsePrice(prod.price)[0] }}.</text><text class="font_size_20">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
                  <!-- <text class="text_13 clamp_text">￥9999</text> -->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="floor_4">
      <view class="image-wrapper_3 flex-row">
        <image mode="aspectFill" class="image_12" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG6fd4643701ae07e3540c54c075c20b40.png" />
      </view>
      <view class="box_6 flex-row">
        <view class="box_7 flex-col">
          <view class="block_1 flex-row justify-between">
            <view class="list_3 flex-row">
              <view class="image-text_3 flex-col justify-between" v-for="(prod, index) in loopData2" :key="index" @tap="toProdPage_1(prod.prodId)">
                <image class="image_13" referrerpolicy="no-referrer" v-if="prod.pic" :src="prod.pic" />
                <image class="image_13" referrerpolicy="no-referrer" v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                <text class="text-group_6 clamp_text">{{ prod.prodName }}</text>
                <view>
                  <text class="text_18 clamp_text"><text class="font_size_20">￥</text><text class="font_weight_6">{{ wxs.parsePrice(prod.price)[0] }}.</text><text class="text_40_2 ">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
                  <!-- <text class="text_19">￥120</text> -->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="box_12 flex-row">
      <view class="group_3 flex-col"></view>
      <view class="group_4 flex-col"></view>
      <view class="group_5 flex-col"></view>
      <text class="text_39">猜你喜欢</text>
      <view class="group_6 flex-col"></view>
      <view class="group_7 flex-col"></view>
      <view class="group_8 flex-col"></view>
    </view>
    <view style="padding: 30rpx;  background-color: #f2f2f2;">
      <view class="floor_5">
        <jp-falls class="falls" :routesList="allProdList">
          <template #left={left}>
            <view v-for="(prod, index) in left" :key="prod.prodId">
              <view class="w50_1" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="image-wrapper_6 flex-row justify-between">
                  <image mode="aspectFill" v-if="prod.pic" class="image_21" referrerpolicy="no-referrer" :src="prod.pic" />
                  <image mode="aspectFill" v-else class="image_21" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                </view>
                <view class="box_13 flex-row justify-between">
                  <view class="box_14 flex-col">
                    <text class="paragraph_4 clamp_text_2">
                      {{prod.prodName}}
                    </text>
                    <view class="box_15 flex-row">
                      <text class="text_40 clamp_text"><text class="text_40_0 ">￥</text><text class="font_weight_6">{{ prod.price_1 }}.</text><text class="text_40_2 ">{{prod.price_2 }}</text></text>
                      <view class="text-wrapper_8 clamp_text">
                        <text class="text_43">已售15{{index}}</text>
                        <text class="text_44"></text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template #right={right}>
            <view v-for="(prod, index) in right" :key="prod.prodId">
              <view class="w50_1" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="image-wrapper_6 flex-row justify-between">
                  <image mode="aspectFill" v-if="prod.pic" class="image_21" referrerpolicy="no-referrer" :src="prod.pic" />
                  <image mode="aspectFill" v-else class="image_21" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
                </view>
                <view class="box_13 flex-row justify-between">
                  <view class="box_14 flex-col">
                    <text class="paragraph_4 clamp_text_2">
                      {{prod.prodName}}
                    </text>
                    <view class="box_15 flex-row">
                      <text class="text_40 clamp_text"><text class="text_40_0 ">￥</text><text class="font_weight_6">{{ prod.price_1 }}.</text><text class="text_40_2 ">{{ prod.price_2 }}</text></text>
                      <view class="text-wrapper_8 clamp_text">
                        <text class="text_43">已售15{{index}}</text>
                        <text class="text_44"></text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </jp-falls>
        <!-- <block v-for="(prod, index) in allProdList" :key="index">
          <view class="w50_1" :data-prodid="prod.prodId" @tap="toProdPage">
            <view class="image-wrapper_6 flex-row justify-between">
              <image mode="aspectFill" v-if="prod.pic" class="image_21" referrerpolicy="no-referrer" :src="prod.pic" />
              <image mode="aspectFill" v-else class="image_21" referrerpolicy="no-referrer" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" />
            </view>
            <view class="box_13 flex-row justify-between">
              <view class="box_14 flex-col">
                <text class="paragraph_4 clamp_text_2">
                  {{prod.prodName}}
                </text>
                <view class="box_15 flex-row">
                  <text class="text_40 clamp_text"><text class="text_40_0 ">￥</text>{{ wxs.parsePrice(prod.price)[0] }}.<text class="text_40_2 ">{{ wxs.parsePrice(prod.price)[1] }}</text></text>
                  <view class="text-wrapper_8 clamp_text">
                    <text class="text_43">已售15{{index}}</text>
                    <text class="text_44"></text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block> -->
      </view>
    </view>

    <!-- <view class="bg-sear">
      <view class="scrolltop">
        <view class="section" @tap="toSearchPage">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/search.png" class="search-img" />
          <text class="placeholder">{{ i18n.search }}</text>
        </view>
      </view>
    </view> -->

    <view class="content">
      <!-- swiper -->

      <!-- end swiper -->

      <!-- 金刚区 s-->
      <!-- <view :class="['cat-item',!indexImgs.length && imgLoaded?'cat-item-top':'']">
        <view class="item" data-sts="1" @tap="toClassifyPage">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/newProd.png" />
          <text>{{ i18n.newProduct }}</text>
        </view>
        <view class="item" data-sts="2" @tap="toSpecialDiscount">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/timePrice.png" />
          <text>{{ i18n.limitedTimeOffer }}</text>
        </view>
        <view class="item" @tap="toABulkList">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/bulkList.png" />
          <text>{{ i18n.groupDiscount }}</text>
        </view>
        <view class="item" data-sts="3" @tap="toSecKillPage">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/neweveryday.png" />
          <text>{{ i18n.spikeSpecial }}</text>
        </view>
        <view class="item" @tap="toCouponCenter">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/newprods.png" />
          <text>{{ i18n.couponCenter }}</text>
        </view>
      </view> -->
      <!-- 金刚区 e-->

      <!-- 分类 s -->
      <!-- <view :class="['cat-item',!indexImgs.length && imgLoaded ? 'cat-item-top' : '']">
        <block v-for="(item, index) in categoryList" :key="index">
          <view class="item" data-sts="1" :data-index="index" :data-id="item.categoryId" @tap="toCategoryPage" v-if="index < 5">
            <image :src="item.icon" />
            <text>{{ item.categoryName }}</text>
          </view>
        </block>
        <view class="item" data-sts="2" @tap="toSpecialDiscount">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/timePrice.png" />
          <text>{{ i18n.limitedTimeOffer }}</text>
        </view>
        <view class="item" @tap="toABulkList">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/bulkList.png" />
          <text>{{ i18n.groupDiscount }}</text>
        </view>
        <view class="item" data-sts="3" @tap="toSecKillPage">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/neweveryday.png" />
          <text>{{ i18n.spikeSpecial }}</text>
        </view>
        <view class="item" @tap="toCouponCenter">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/newprods.png" />
          <text>{{ i18n.couponCenter }}</text>
        </view>
        <view class="item" @tap="toCouponCenter">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/newprods.png" />
          <text>{{ i18n.couponCenter }}</text>
        </view>
      </view> -->
      <!-- 分类 e -->

      <!-- 消息播放 -->

    </view>

    <!-- 直播列表入口 -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <view class="live-enter" @tap="toLiveListPage">
			<image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/live-enter.png"></image>
		</view> -->
    <!-- #endif -->
    <!-- style列表样式(0:一列一个,1:一列两个,2:一列三个) -->
    <!-- 一列三个 -->
    <!-- <view v-if="update" class="update">
      <block v-for="(item, id) in taglist" :key="id">
        <view v-if="item.style==2 && item.prods" class="up-to-date">
          <view class="title">
            <text class="title-text">{{ item.title }}</text>
            <view class="more-prod-cont" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="toClassifyPage">
              <text class="more">{{ i18n.seeMore }}</text>
            </view>
          </view>
          <view class="item-cont">
            <block v-for="(prod, prodId) in item.prods" :key="prodId">
              <view class="prod-item" :data-prodid="prod.prodId" @tap="toProdPage">
                <view>
                  <view class="imagecont">
                    <image v-if="prod.pic" :src="prod.pic" class="prodimg" />
                    <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" class="prodimg" />
                  </view>
                  <view class="prod-text">{{ prod.prodName }}</view>
                  <view class="price">
                    <text class="symbol">￥</text>
                    <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                    <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
        <view v-if="item.style==1 && item.prods" class="hot-sale" data-comment="一列两个">
          <view class="title">
            <text class="title-text">{{ item.title }}</text>
            <view class="more-prod-cont" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="toClassifyPage">
              <text class="more">{{ i18n.seeMore }}</text>
              <text class="arrow" />
            </view>
          </view>
          <view class="hotsale-item-cont">
            <block v-for="(prod, prodId) in item.prods" :key="prodId">
              <view class="prod-items" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="hot-imagecont">
                  <image v-if="prod.pic" :src="prod.pic" class="hotsaleimg" />
                  <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" class="hotsaleimg" />
                </view>
                <view class="hot-text">
                  <view class="hotprod-text">3333{{ prod.prodName }}</view>
                  <view class="prod-info">{{ prod.brief }}</view>
                  <view class="prod-text-info">
                    <view class="price">
                      <text class="symbol">￥</text>
                      <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                      <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                    </view>
                    <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/tabbar/basket-sel.png" class="basket-img" />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <view v-if="item.style==0 && item.prods" class="more-prod" data-comment="一列一个">
          <view class="title">
            <text class="title-txt">{{ item.title }}</text>
            <view class="more-prod-cont" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="toClassifyPage">
              <text class="more">{{ i18n.seeMore }}</text>
              <text class="arrow" />
            </view>
          </view>
          <view class="prod-show">
            <block v-for="(prod, prodId) in item.prods" :key="prodId">
              <view class="show-item" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="more-prod-pic">
                  <image v-if="prod.pic" :src="prod.pic" class="more-pic" />
                  <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" class="more-pic" />
                </view>
                <view class="prod-text-right">
                  <view class="prod-text more">{{ prod.prodName }}</view>
                  <view class="more-goods">{{ prod.brief }}</view>
                  <view class="b-cart">
                    <view class="price">
                      <text class="symbol">￥</text>
                      <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                      <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                    </view>
                    <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/tabbar/basket-sel.png" class="basket-img" />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

      </block>

      <view v-if="!tagLoaded" class="empty-view" />

      <block>
        <view class="hot-sale">
          <view class="title-box">
            <image v-if="allProdList" src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/hotSale.png" class="hot-title-image" mode="heightFix" />
          </view>
          <view class="hotsale-item-cont">
            <block v-for="(prod, prodId) in allProdList" :key="prodId">
              <view class="prod-items" :data-prodid="prod.prodId" @tap="toProdPage">
                <view class="hot-imagecont">
                  <image v-if="prod.pic" :src="prod.pic" class="hotsaleimg" />
                  <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" class="hotsaleimg" />
                </view>
                <view class="hot-text">
                  <view class="hotprod-text">{{ prod.prodName }}</view>
                  <view class="prod-info">{{ prod.brief }}</view>
                  <view class="prod-text-info">
                    <view class="price">
                      <text class="symbol">￥</text>
                      <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                      <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                    </view>
                    <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/tabbar/basket-sel.png" class="basket-img" />
                  </view>
                </view>
              </view>
            </block>
          </view>
          <view v-if="loadAll" class="load-all">{{ i18n.endTips }}</view>
        </view>

      </block>
    </view> -->
    <!-- 切换语言组件 -->
    <!-- <changeLang /> -->

    <!-- 回到顶部 -->
    <back-top-btn v-if="showBacktop" />

    <!-- <privacy-pop v-if="showPop" @hidePop="hidePop" /> -->

  </view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
//index.js
//获取应用实例
var http = require("../../utils/http.js");
var config = require("../../utils/config.js");
var util = require("../../utils/util.js");
const app = getApp().globalData;
import changeLang from '../../components/change-lang/index.vue'
import backTopBtn from "../../components/back-top-btn/index.vue"
import privacyPop from '../../components/privacy-pop/index.vue'

export default {
  data () {
    return {
      startY: 0, // 触摸开始时的Y坐标  
      top_height: '90px', // 触摸开始时的Y坐标  
      box_26_is: false, // 解决苹果下拉白条条问题  
      loopData0: [
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNGdc5a98dd7335d757c4887a34685cb31c.png',
          lanhutext0: '兑换专区'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG2c0e08dabb638f66f3875cde9dc4da8c.png',
          lanhutext0: '积分商城'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG98bd249edd008497d59cdc515fedc7ea.png',
          lanhutext0: '分销中心'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG4ac78a221b7a2e65b5b4826489cdb77e.png',
          lanhutext0: '抽奖活动'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNGb26308bc6cca6a3727266ac1ae354bf0.png',
          lanhutext0: '新品上市'
        }
      ],

      loopData1: [
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG5d2fa91e0ca176533ec82555eb2c779f.png',
          lanhutext0: '实案说法系列普法丛书',
          lanhutext1: '￥79',
          lanhutext2: '￥999'
        },
      ],
      loopData1_1: [

      ],
      loopData2: [
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG7b25087e519e5879cff7b969493bc741.png',
          lanhutext0: '实案说法系列普法丛书'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG7b25087e519e5879cff7b969493bc741.png',
          lanhutext0: '实案说法系列普法丛书'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG7b25087e519e5879cff7b969493bc741.png',
          lanhutext0: '实案说法系列普法丛书'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG7b25087e519e5879cff7b969493bc741.png',
          lanhutext0: '实案说法系列普法丛书'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG7b25087e519e5879cff7b969493bc741.png',
          lanhutext0: '实案说法系列普法丛书'
        },
        {
          lanhuimage0:
            'https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG7b25087e519e5879cff7b969493bc741.png',
          lanhutext0: '实案说法系列普法丛书'
        }
      ],
      loopData3: [],
      loopData4: [],
      loopData5: [],
      indicatorDots: true,
      indicatorColor: '#d1e5fb',
      indicatorActiveColor: 'rgba(255, 141, 26, 1)',
      autoplay: true,
      interval: 3000,
      duration: 1000,
      indexImgs: [],
      seq: 0,
      news: [],
      taglist: [],
      allProdList: [],
      loadAll: false,
      current: 1,
      pages: 1,
      sts: 0,
      current: 1,
      size: 6,
      pages: 1,
      update: true,
      scrollTop: "",
      showBacktop: false,
      showPop: false,
      imgLoaded: false,
      tagLoaded: false,
      categoryList: [],
      parentId: "",
      paddingTop: '41px',
      height_: ''
    };
  },

  components: {
    changeLang,
    backTopBtn,
    privacyPop
  },
  props: {},
  computed: {
    i18n () {
      return this.$t('index')
    }
  },
  onLoad: function () {
    this.getAllData();
    // this.$forceUpdate() //强制刷新页面
    // #ifdef APP-PLUS
    if (!uni.getStorageSync('isPrivacy') || uni.getStorageSync('isPrivacy') === -1) {
      uni.showTabBar()
      this.showPop = true
    }
    // #endif


    // #ifdef MP-WEIXIN
    this.$nextTick(() => {
      let { height, top } = wx.getMenuButtonBoundingClientRect()
      console.log(height, top, 'height, top');
      this.paddingTop = top + 3 + 'px'
      this.height_ = height + 'px'
    })
    // #endif

  },
  onShow: function () {
    // util.transTabbar();
    uni.setNavigationBarTitle({
      title: this.i18n.yamiMultiStore
      // title: uni.getStorageSync('uniTitleContentCn') || this.i18n.yamiMultiStore
      // title: ""
    });
    // this.$forceUpdate() //强制刷新页面

    // #ifndef H5
    var logData = uni.getStorageSync('flowAnalysisLogDto')
    uni.setStorageSync('step', uni.getStorageSync('step') / 1 + 1)
    if (logData && logData.pageId != 1 || uni.getStorageSync('step') == 1) {
      logData.pageId = 1
      logData.step = uni.getStorageSync('step')
      uni.setStorageSync('flowAnalysisLogDto', logData)
      http.saveLog(logData, 1)
    }
    // #endif

    var ths = this; //加载分类列表
    var params = {
      url: "/category/categoryInfo",
      method: "GET",
      data: {
        parentId: ''
      },
      callBack: function (res) {
        ths.setData({
          categoryList: res,
        });
      }
    };
    http.request(params);

    http.getCartCount();
  },

  onPullDownRefresh: function () {
    //模拟加载
    var ths = this;
    this.setData({
      //下拉刷新
      current: 1
    });
    setTimeout(function () {
      ths.box_26_is = false
      ths.getAllData(); // wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh(); //停止下拉刷新
    }, 100);
  },

  onReachBottom: function () {
    console.log(this.current, this.pages, 'ssssss');
    if (this.current < this.pages) {
      this.current += 1
      console.log(this.current, this.pages, 'ssssss');
      this.getAllProd()
    } else {
      this.setData({
        loadAll: true
      })
    }
  },

  /**
   * 首页分享功能
   */
  onShareAppMessage: function (e) {
    return {
      path: "pages/index/index"
    };
  },

  methods: {
    handleTouchStart (e) {
      this.startY = e.touches[0].clientY; // 记录触摸开始时的Y坐标  
    },
    handleTouchMove (e) {
      const currentY = e.touches[0].clientY; // 当前触摸点的Y坐标  
      const distance = currentY - this.startY; // 计算滑动的距离  
      console.log(distance);
      this.top_height = 85 + distance + 'px'

      if (distance < 200) {
        // this.top_height = 85 + distance + 'px'

      } else {
        this.top_height = this.top_height = 85 + 200 + 'px'
      }
      // if (distance > 10) { // 如果滑动距离超过50px  
      //   this.box_26_is = true
      //   e.preventDefault(); // 阻止默认行为，即不允许继续下拉  
      // } else {
      //   // this.box_26_is = false
      // }
    },
    handleTouchEnd (e) {
      let this_ = this
      // 例如，判断滑动的方向或距离，然后执行相应的动作。  
      setTimeout(function () {
        console.log('滑动松1开', this_.top_height);

        this_.top_height = '85px'

      }, 500);

      // this.box_26_is = false
    },

    toCategoryPage (e) {
      app.categoryCheckId = e.currentTarget.dataset.id // 设置全局变量
      app.categorySelIndex = e.currentTarget.dataset.index // 设置全局变量
      uni.switchTab({
        url: '/pages/category/category'
      });
    },
    stay_tuned () {
      uni.showToast({
        title: '敬请期待',
        duration: 2000,
        icon: 'none'
      })
    },

    hidePop () {
      this.showPop = false
      uni.showTabBar()
    },

    /**
     * 跳转到直播列表
     */
    toLiveListPage: function () {
      util.tapLog(3)
      uni.navigateTo({
        url: '/package-activities/pages/live-broadcast/live-broadcast',
      })
    },

    // 页面滚动到指定位置指定元素固定在顶部
    onPageScroll: function (e) {
      this.scrollTop = e.scrollTop
      if (this.scrollTop > 8) {
        this.box_26_is = false
      }
      if (this.scrollTop > 800) {
        this.setData({
          showBacktop: true
        })
      } else if (this.scrollTop < 800) {
        this.setData({
          showBacktop: false
        })
      }
    },

    toProdPage: function (e) {
      util.tapLog(3)
      var prodid = e.currentTarget.dataset.prodid;
      if (prodid) {
        // uni.navigateTo({
        // 	url: '/pages/prod/prod?prodid=' + prodid
        // });
        this.$Router.push({
          path: '/pages/prod/prod',
          query: {
            prodid: prodid
          }
        })
      }
    },
    // 轮播图点击
    toIndexImgContent: function (e) {
      util.tapLog(3)
      var type = e.currentTarget.dataset.type;
      if (type == 0) {
        // this.toProdPage(e);
        this.$Router.push({
          path: '/pages/prod/prod',
          query: {
            prodid: e.currentTarget.dataset.prodid,
            bannerEnter: '1'
          }
        })
      }
    },
    toCouponCenter: function () {
      util.tapLog(3)
      uni.navigateTo({
        url: '/package-activities/pages/coupon-center/coupon-center'
      });
    },
    // 跳转搜索页
    toSearchPage: function () {
      util.tapLog(3)
      uni.navigateTo({
        url: '/pages/search-page/search-page'
      });
    },
    //跳转商品活动页面
    toClassifyPage: function (e) {
      util.tapLog(3)
      var url = '/pages/prod-classify/prod-classify?sts=' + e.currentTarget.dataset.sts;
      var id = e.currentTarget.dataset.id;
      var title = e.currentTarget.dataset.title;
      if (id) {
        url += "&tagid=" + id + "&title=" + title;
      }
      uni.navigateTo({
        url: url
      });
    },
    toSecKillPage: function () {
      util.tapLog(3)
      uni.navigateTo({
        url: '/package-activities/pages/snap-up-list/snap-up-list'
      });
    },
    toABulkList: function () {
      util.tapLog(3)
      uni.navigateTo({
        url: '/package-activities/pages/bulk-list/bulk-list'
      });
    },
    //跳转公告列表页面
    onNewsPage: function () {
      util.tapLog(3)
      uni.navigateTo({
        url: '/pages/recent-news/recent-news'
      });
    },

    getAllData () {
      http.getCartCount(); //重新计算购物车总数量

      this.getIndexImgs();
      this.getNoticeList();
      this.getTag();
      this.getAllProd()
      this.getAllProd_1(64)
      this.getAllProd_1(254)
      this.getAllProd_1(296)
      this.getAllProd_1(31)
    },
    go_callBack (e) {
      let this_ = this
      // #ifndef MP
      if (e.lanhutext0 === '分销中心') {
        uni.getSystemInfo({
          success: function (res) {
            if (res.platform == 'ios') { // ios
              this_.stay_tuned()
            } else {
              uni.navigateTo({
                url: '/pages/dis-center/dis-center'
              })
            }
          }
        })
      }

      // #endif
      if (e.lanhutext0 === '分销中心') {
        uni.navigateTo({
          url: '/pages/dis-center/dis-center'
        })
      } else if (e.lanhutext0 === '兑换专区') {
        uni.navigateTo({
          url: `/pages/points-redemption/points-redemption`
        })
      } else {
        this_.stay_tuned()
      }

    },
    go_chat () {
      console.log(11111111111);
      uni.navigateTo({
        url: '/pages/chat/chat'
      })
    },

    //加载轮播图
    getIndexImgs () {
      //加载轮播图
      var params = {
        url: "/indexImgs",
        method: "GET",
        data: {},
        callBack: res => {
          this.setData({
            indexImgs: res || [],
            seq: res
          });
          uni.hideLoading();
          this.imgLoaded = true
        }
      };
      http.request(params);
    },

    getNoticeList () {
      // 加载公告
      var params = {
        url: "/shop/notice/topNoticeList",
        method: "GET",
        data: {},
        callBack: res => {
          this.setData({
            news: res
          });
          uni.hideLoading();
        }
      };
      http.request(params);
    },

    // 加载商品标题分组列表
    getTag () {
      this.tagLoaded = false
      var params = {
        url: "/prod/tag/prodTagList",
        method: "GET",
        data: {},
        callBack: res => {
          for (var i = 0; i < res.length; i++) {
            this.update = false
            this.update = true
            this.getTagProd(res[i].id, i, res[i].style);
          }
          this.setData({
            taglist: res
          });
          uni.hideLoading();
        }
      };
      http.request(params);
    },

    // 加载商品列表
    getTagProd (id, index, style) {
      if (style == 0) {
        this.size = 20
      } else {
        this.size = 6
      }
      var param = {
        url: "/prod/prodListByTagId",
        method: "GET",
        data: {
          tagId: id,
          size: this.size
        },
        callBack: res => {

          this.update = false
          this.update = true
          var taglist = this.taglist;
          taglist[index].prods = res.records;
          if (style == 0) {
            this.loopData1_1 = res.records;
          } else {
            this.loopData1 = res.records;
          }
          this.setData({
            taglist: taglist
          });
          this.$nextTick(() => {
            if (index === this.taglist.length - 1 && this.taglist[index].prods) {
              this.tagLoaded = true
            }
          })
        }
      };
      http.request(param);
    },

    // 加载全部商品列表
    getAllProd () {
      var param = {
        url: "/search/searchProdPage",
        method: "GET",
        data: {
          sort: 1,
          orderBy: 1,
          current: this.current,
          isAllProdType: true,
          st: 0,
          size: 12
        },
        callBack: res => {

          if (this.current == 1) {
            this.setData({
              allProdList: res.records.map((e) => {
                return {
                  ...e,
                  price_1: this.$parsePrice(e.price)[0],
                  price_2: this.$parsePrice(e.price)[1],
                }
              }),
              pages: res.pages
            });
          } else {
            let allProdList = this.allProdList;
            let arr = res.records.map((e) => {
              return {
                ...e,
                price_1: this.$parsePrice(e.price)[0],
                price_2: this.$parsePrice(e.price)[1],
              }

            })
            allProdList.push(...arr);
            this.setData({
              allProdList,
              pages: res.pages
            });
          }

        }
      };
      http.request(param);
    },
    // 加载测试数据
    getAllProd_1 (e) {
      var param = {
        url: "/search/searchProdPage",
        method: "GET",
        data: {
          categoryId: e, current: 1, size: 10, sort: 0, isAllProdType: true
        },
        callBack: res => {

          if (e == 64) {
            this.loopData2 = res.records
          }
          if (e == 254) {
            this.loopData3 = res.records
          }
          if (e == 296) {
            this.loopData4 = res.records
          }
          if (e == 31) {
            this.loopData5 = res.records
          }

        }
      };
      http.request(param);
    },
    toProdPage_1 (e) {
      this.$Router.push({ path: '/pages/prod/prod', query: { prodid: e } })
    },
    go_sub_category (e1, e2) {
      uni.navigateTo({
        url: `/pages/sub-category/sub-category?parentId=${e1}&categoryId=${e2}`
      });
    },

    /**
     * 跳转限时特惠
     */
    toSpecialDiscount: function () {
      util.tapLog(3)
      this.$Router.push('/package-activities/pages/special-discount/special-discount')
    },
  }
};
</script>
<style scoped lang='scss'>
@import "./index.css";
@import "./index.scss";
page {
  background: #f2f2f2;
  height: 100%;
}
.container {
  background: #f2f2f2;
  height: 100%;

  .box_26_1 {
    position: relative;
  }
  .box_26_2 {
    position: fixed;
    top: 0;
    width: 100%;
    height: 200rpx;
    background: url(https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/loading.png)
      10% no-repeat;
    //  background: #fe6a22;
    background-position: 50% 10%;
    background-size: 10% 10%;
  }
}
.topBanner {
  padding-top: 25rpx;
}

.box_26 {
  .img_box {
    text-align: center;
    .banner_ {
      width: 692rpx;
      height: 263rpx;
      border-radius: 26rpx;
    }
  }

  height: 392.4418604651163rpx;
  background: url(https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG2e860754d7c54eb0cd1f6f540b41cb30.png)
    100% no-repeat;
  background-size: 100% 100%;
  .hig40 {
    // position: fixed;
    padding: 80rpx 0 34rpx;
    // background: url(https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNG2e860754d7c54eb0cd1f6f540b41cb30.png)
    //   100% no-repeat;
    // background-size: 100%;
    top: -8rpx;
    width: 100%;
    z-index: 2;
    background-position: 0rpx 6rpx;
    .box_27 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 17px;
      width: 523.2558139534884rpx;
      display: flex;
      align-items: center;
      height: 61.04651162790697rpx;
      margin: 0rpx 0 0 26.162790697674417rpx;
      .thumbnail_5 {
        width: 27.906976744186046rpx;
        height: 27.906976744186046rpx;
        margin: 0rpx 0 0 17.441860465116278rpx;
        display: inline-block;
      }
      .text_70 {
        overflow-wrap: break-word;
        color: rgba(135, 135, 135, 1);
        font-size: 24.41860465116279rpx;
        font-family: Source Han Sans-Regular;
        font-weight: NaN;
        text-align: left;
        white-space: nowrap;
        display: inline-block;
        padding-left: 15rpx;
      }
    }
    /* 微信小程序特有的样式 */
    /* #ifdef MP-WEIXIN */
    .box_27 {
      width: 333rpx;
    }

    /* #endif */
  }
  /* #ifdef MP-WEIXIN */
  .hig40 {
    padding: 108rpx 0 10rpx;
  }
  /* #endif */
  .hig40_1 {
    // height: 152rpx;
  }
  .label_2 {
    width: 52.325581395348834rpx;
    height: 52.325581395348834rpx;
    margin: 0rpx 0 0 34.883720930232556rpx;
  }

  .label_3 {
    width: 52.325581395348834rpx;
    height: 52.325581395348834rpx;
    margin: 0rpx 34.883720930232556rpx 0 33.13953488372093rpx;
  }
}
/* #ifdef MP-WEIXIN */
.box_26 {
  background-position: 0rpx -11rpx;
}
/* #endif */

.message-play {
  top: 40rpx;
  position: relative;
  height: 90rpx;
  background: #fff;
  margin: 0 35rpx;
  padding: 0 5rpx 0 142rpx;
  box-sizing: border-box;
  border-bottom: 2rpx solid #fafafa;
  border-top: 2rpx solid #fafafa;
  display: flex;

  .hornpng {
    width: 77rpx;
    height: 36rpx;
    position: absolute;
    left: 46rpx;
    top: 27rpx;
    margin-right: 8rpx;
  }
  .swiper-cont {
    height: 90rpx;
    line-height: 90rpx;
    .items {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-align: left;
      .thumbnail_1 {
        width: 27.906976744186046rpx;
        height: 27.906976744186046rpx;
        margin: 10.372093023255815rpx 0 0 46.27906976744185rpx;
      }
    }
  }
}
.list_1 {
  width: 100%;
  justify-content: center;
  margin: 100rpx 0 0 0rpx;
  .image-text_1 {
    width: 97.67441860465117rpx;
    height: 139.53488372093022rpx;
    margin: 0 24.83720930232558rpx;
    .image_1 {
      width: 95.93023255813954rpx;
      height: 95.93023255813954rpx;
      margin-left: 1.744186046511628rpx;
    }
    .text-group_1 {
      width: 97.67441860465117rpx;
      height: 26.162790697674417rpx;
      overflow-wrap: break-word;
      color: rgba(61, 61, 61, 1);
      font-size: 24.41860465116279rpx;
      font-family: Source Han Sans-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 24.41860465116279rpx;
      margin-top: 17.441860465116278rpx;
    }
  }
}

/* #ifdef MP-WEIXIN */
.list_1 {
  margin: 78rpx 0 0 0rpx;
}
/* #endif */
.image_2 {
  width: 680.2325581395348rpx;
  height: 134.30232558139534rpx;
  // margin: 33rpx 0;
  margin: 0 0 33rpx 0;
}
.section_1 {
  background-color: rgba(242, 242, 242, 1);
  width: 750rpx;
  height: 20.930232558139537rpx;
}
.floor_2 {
  // display: flex;
  // flex-wrap: wrap;
  width: 100%;

  .w50_ {
    width: 50%;
    overflow: hidden;
    margin-bottom: 5rpx;
    .section_2 {
      height: 87.20930232558139rpx;
      position: relative;
      .box_2 {
        width: 256.3953488372093rpx;
        height: 87.20930232558139rpx;
        .box_3 {
          width: 256.3953488372093rpx;
          height: 45.348837209302324rpx;
          .text_1 {
            width: 125.5813953488372rpx;
            height: 45.348837209302324rpx;
            overflow-wrap: break-word;
            color: rgba(61, 61, 61, 1);
            font-size: 31.3953488372093rpx;
            font-family: Source Han Sans-Medium;
            font-weight: 500;
            text-align: left;
            white-space: nowrap;
            line-height: 45.348837209302324rpx;
          }
          .text-wrapper_1 {
            position: relative;
            top: 4rpx;
            background-color: rgba(243, 25, 30, 1);
            border-radius: 10px;
            height: 34.883720930232556rpx;
            line-height: 34rpx;
            width: 113.37209302325581rpx;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-size: 20.930232558139537rpx;
            font-family: Source Han Sans-Regular;
            text-align: center;
            white-space: nowrap;
          }
        }
        .text_3 {
          width: 219.7674418604651rpx;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          font-size: 24.41860465116279rpx;
          font-family: Source Han Sans-Normal;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
          margin: 6.976744186046512rpx 0 0 1.744186046511628rpx;
        }
        .color_1 {
          color: rgba(255, 141, 26, 1);
        }
        .color_2 {
          color: rgba(42, 130, 228, 1);
        }
        .color_3 {
          color: rgba(121, 72, 234, 1);
        }
        .color_4 {
          color: rgba(67, 207, 124, 1);
        }
      }
      .thumbnail_1 {
        width: 27.906976744186046rpx;
        height: 27.906976744186046rpx;
        margin: 10.372093023255815rpx 0 0 46.27906976744185rpx;
      }
    }
    .image-wrapper_1 {
      width: 93%;
      height: 250rpx;
      margin: 19.186046511627907rpx 0 20rpx 0rpx;
      overflow-x: auto;
      .wrapper_1_view {
        width: 148.25581395348837rpx;
        margin: 0rpx 17rpx 0rpx 0;
      }
      .text_21 {
        width: 100%;
        height: 30rpx;
        overflow-wrap: break-word;
        color: rgba(243, 25, 30, 1);
        font-size: 25rpx;
        font-family: Source Han Sans-Regular;
        text-align: left;
        white-space: nowrap;
        line-height: 30rpx;
        display: inline-block;
        margin-top: 10rpx;
      }
      .image_3 {
        width: 148.25581395348837rpx;
        height: 148.25581395348837rpx;
        display: inline-block;
        border-radius: 17rpx 17rpx 17rpx 17rpx;
      }
    }
  }
  .rig5 {
    position: relative;
    right: -28rpx;
  }
}
.floor_3 {
  .box_5 {
    padding: 34.883720930232556rpx 34.883720930232556rpx 17rpx
      34.883720930232556rpx;
    background-color: #f2f2f2;
    .section_4 {
      width: 680.2325581395rpx;
      height: 464.813953rpx;
      overflow: hidden;
      background: url(https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/index/MasterDDSSlicePNGcf8f5991e981b887eab6b74f03f47a2b.png)
        100% no-repeat;
      background-size: 100% 100%;
      padding: 26.1627906977rpx 20.9302325581rpx 0;
      .text-wrapper_2 {
        width: 638.3720930232558rpx;
        height: 45.348837209302324rpx;
        .text_10 {
          width: 125.5813953488372rpx;
          height: 45.348837209302324rpx;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 31.3953488372093rpx;
          font-family: Source Han Sans-Medium;
          font-weight: 500;
          text-align: left;
          white-space: nowrap;
          line-height: 45.348837209302324rpx;
        }
        .text_11 {
          width: 48.83720930232558rpx;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          color: rgba(255, 255, 255, 1);
          font-size: 24.41860465116279rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
          margin-top: 8.720930232558139rpx;
        }
      }
      .group_1 {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        width: 638.3720930232558rpx;
        justify-content: flex-center;
        margin: 31.3953488372093rpx 0 33.13953488372093rpx;
        overflow: auto;
        position: relative;
        right: -1rpx;
        .list_2 {
          padding: 34.883720930232556rpx 34rpx 20rpx;

          // width: 570.3488372093024rpx;
          .image-text_2 {
            width: 174.41860465116278rpx;
            margin-right: 30rpx;
            .image_11 {
              width: 174.41860465116278rpx;
              height: 174.41860465116278rpx;
              border-radius: 17rpx;
            }
            .text-group_5 {
              width: 170.93023255813952rpx;
              height: 62.7906976744186rpx;
              overflow-wrap: break-word;
              color: rgba(61, 61, 61, 1);
              font-size: 24.41860465116279rpx;
              font-family: Source Han Sans-Regular;
              font-weight: NaN;
              text-align: left;
              line-height: 31.3953488372093rpx;
              margin: 17.441860465116278rpx 0 0 1.744186046511628rpx;
              overflow: hidden;
            }
            .text_12 {
              width: 100%;
              height: 30rpx;
              overflow-wrap: break-word;
              color: rgba(243, 25, 30, 1);
              font-size: 25rpx;
              font-family: Source Han Sans-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 30rpx;
              display: inline-block;
              margin-top: 10rpx;
            }
            .text_13 {
              width: 40%;
              height: 31.3953488372093rpx;
              overflow-wrap: break-word;
              color: rgba(173, 173, 173, 1);
              font-size: 15rpx;
              font-family: Source Han Sans-Regular;
              text-decoration: line-through;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 31.3953488372093rpx;
              margin-left: 7%;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
.floor_4 {
  padding: 17.883720930232556rpx 34rpx;
  background-color: #f2f2f2;
  .image-wrapper_3 {
    height: 261.6279069767442rpx;
    width: 100%;
    .image_12 {
      width: 100%;
      height: 261.6279069767442rpx;
    }
  }
  .box_6 {
    width: 100%;
    height: 383.72093023255815rpx;
    .box_7 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 0px 0px 10px 10px;
      height: 343rpx;
      width: 100%;
      justify-content: flex-center;
      overflow: hidden;
      .block_1 {
        margin: 41.86046511627907rpx 20.930232558139537rpx;
        overflow-x: auto;
        .list_3 {
          width: 568.6046511627907rpx;
          justify-content: space-between;
          .image-text_3 {
            width: 174.41860465116278rpx;
            margin-right: 22.674418604651162rpx;
            .image_13 {
              border-radius: 17rpx;
              width: 174.41860465116278rpx;
              height: 174.41860465116278rpx;
            }
            .text-group_6 {
              width: 170.93023255813952rpx;
              height: 36rpx;
              overflow-wrap: break-word;
              color: rgba(61, 61, 61, 1);
              font-size: 24.41860465116279rpx;
              font-family: Source Han Sans-Regular;
              font-weight: NaN;
              text-align: left;
              line-height: 31.3953488372093rpx;
              margin: 17.441860465116278rpx 0 0 1.744186046511628rpx;
            }
            .text_18 {
              width: 100%;
              height: 31.3953488372093rpx;
              overflow-wrap: break-word;
              color: rgba(243, 25, 30, 1);
              font-size: 25rpx;
              font-family: Source Han Sans-Regular;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 31.3953488372093rpx;
              display: inline-block;
            }
            .text_19 {
              width: 68.02325581395348rpx;
              height: 31.3953488372093rpx;
              overflow-wrap: break-word;
              color: rgba(173, 173, 173, 1);
              font-size: 20.930232558139537rpx;
              font-family: Source Han Sans-Regular;
              text-decoration: line-through;
              font-weight: NaN;
              text-align: left;
              white-space: nowrap;
              line-height: 31.3953488372093rpx;
              margin-left: 17.441860465116278rpx;
            }
          }
        }
      }
    }
  }
}
.box_12 {
  background-color: #f2f2f2;
  padding: 6.325581rpx 0 19rpx;
  display: flex;
  justify-content: center;
  .group_3 {
    background-color: rgba(255, 141, 26, 1);
    border-radius: 1px 0px 0px 1px;
    width: 5.232558139534884rpx;
    height: 5.232558139534884rpx;
    margin-top: 17.441860465116278rpx;
  }
  .group_4 {
    background-color: rgba(255, 89, 63, 1);
    border-radius: 2px 0px 0px 2px;
    width: 8.720930232558139rpx;
    height: 8.720930232558139rpx;
    margin: 13.953488372093023rpx 0 0 8.720930232558139rpx;
  }
  .group_5 {
    background-color: rgba(243, 25, 30, 1);
    border-radius: 2px 0px 0px 2px;
    width: 12.209302325581396rpx;
    height: 12.209302325581396rpx;
    margin: 12.209302325581396rpx 0 0 8.720930232558139rpx;
  }
  .text_39 {
    width: 139.53488372093022rpx;
    height: 36.627906976744185rpx;
    overflow-wrap: break-word;
    color: rgba(61, 61, 61, 1);
    font-size: 34.883720930232556rpx;
    font-family: Source Han Sans-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 31.3953488372093rpx;
    margin-left: 17.441860465116278rpx;
  }
  .group_6 {
    background-color: rgba(243, 25, 30, 1);
    border-radius: 0px 2px 2px 0px;
    width: 12.209302325581396rpx;
    height: 12.209302325581396rpx;
    margin: 12.209302325581396rpx 0 0 17.441860465116278rpx;
  }
  .group_7 {
    background-color: rgba(255, 89, 63, 1);
    border-radius: 0px 2px 2px 0px;
    width: 8.720930232558139rpx;
    height: 8.720930232558139rpx;
    margin: 13.953488372093023rpx 0 0 8.720930232558139rpx;
  }
  .group_8 {
    background-color: rgba(255, 141, 26, 1);
    border-radius: 0px 1px 1px 0px;
    width: 5.232558139534884rpx;
    height: 5.232558139534884rpx;
    margin: 15.69767441860465rpx 0 0 8.720930232558139rpx;
  }
}
.floor_5 {
  .w50_1 {
    margin-bottom: 10px; /* 元素之间的间距 */
    width: 100%; /* 元素宽度 */
  }
  .image-wrapper_6 {
    height: 327.90697674418607rpx;
    .image_21 {
      width: 100%;
      height: 327.90697674418607rpx;
      border-radius: 17rpx 17rpx 0rpx 0rpx;
    }
    .image_22 {
      width: 327.90697674418607rpx;
      height: 327.90697674418607rpx;
    }
  }
  .box_13 {
    // height: 191.86046511627907rpx;
    .box_14 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 0px 0px 10px 10px;
      width: 100%;
      // height: 191.86046511627907rpx;
      justify-content: flex-center;
      .paragraph_4 {
        width: 279.06976744186045rpx;
        // height: 69.76744186046511rpx;
        overflow-wrap: break-word;
        font-family: Source Han Sans-Regular;
        font-weight: NaN;
        text-align: left;
        margin: 26.162790697674417rpx 0 0 24.41860465116279rpx;
        overflow: hidden;
        font-weight: 400;
        font-size: 28rpx;
        color: #111111;
        line-height: 35rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .box_15 {
        height: 34.883720930232556rpx;
        margin: 25rpx 0 26.162790697674417rpx 24.41860465116279rpx;
        .text_40 {
          width: 66%;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          color: rgba(243, 25, 30, 1);
          font-size: 25rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
        }
        .text_40_0 {
          overflow-wrap: break-word;
          color: rgba(243, 25, 30, 1);
          font-size: 20rpx;
        }
        .text_40_2 {
          overflow-wrap: break-word;
          color: rgba(243, 25, 30, 1);
          font-size: 20rpx;
        }
        .text-wrapper_7 {
          width: 78.48837209302326rpx;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: Source Han Sans-Regular;
          text-decoration: line-through;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
          margin-left: 17.441860465116278rpx;
          .text_41 {
            width: 80rpx;
            height: 34.883720930232556rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 18rpx;
            font-family: Source Han Sans-Regular;
            text-decoration: line-through;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
            display: inline-block;
          }
          .text_42 {
            width: 78.48837209302326rpx;
            height: 34.883720930232556rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 31.3953488372093rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
        }
        .text-wrapper_8 {
          width: 88.95348837209302rpx;
          height: 35rpx;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
          margin: 0rpx 0 0 10.465116279069768rpx;
          position: relative;
          top: -6rpx;
          .text_43 {
            width: 88.95348837209302rpx;
            height: 27.906976744186046rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 20.930232558139537rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
          .text_44 {
            width: 88.95348837209302rpx;
            height: 27.906976744186046rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 31.3953488372093rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
        }
      }
    }
    .box_16 {
      background-color: rgba(255, 255, 255, 1);
      border-radius: 0px 0px 10px 10px;
      width: 327.90697674418607rpx;
      height: 191.86046511627907rpx;
      justify-content: flex-center;
      .paragraph_5 {
        width: 279.06976744186045rpx;
        height: 69.76744186046511rpx;
        overflow-wrap: break-word;
        color: rgba(61, 61, 61, 1);
        font-size: 27.906976744186046rpx;
        font-family: Source Han Sans-Regular;
        font-weight: NaN;
        text-align: left;
        line-height: 34.883720930232556rpx;
        margin: 26.162790697674417rpx 0 0 24.41860465116279rpx;
      }
      .group_9 {
        width: 279.06976744186045rpx;
        height: 34.883720930232556rpx;
        margin: 34.883720930232556rpx 0 26.162790697674417rpx
          24.41860465116279rpx;
        .text_45 {
          width: 83.72093023255815rpx;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          color: rgba(243, 25, 30, 1);
          font-size: 31.3953488372093rpx;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
        }
        .text-wrapper_9 {
          width: 78.48837209302326rpx;
          height: 34.883720930232556rpx;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: Source Han Sans-Regular;
          text-decoration: line-through;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
          margin-left: 17.441860465116278rpx;
          .text_46 {
            width: 78.48837209302326rpx;
            height: 34.883720930232556rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 20.930232558139537rpx;
            font-family: Source Han Sans-Regular;
            text-decoration: line-through;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
          .text_47 {
            width: 78.48837209302326rpx;
            height: 34.883720930232556rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 31.3953488372093rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
        }
        .text-wrapper_10 {
          width: 88.95348837209302rpx;
          height: 27.906976744186046rpx;
          overflow-wrap: break-word;
          font-size: 0;
          font-family: Source Han Sans-Regular;
          font-weight: NaN;
          text-align: left;
          white-space: nowrap;
          line-height: 34.883720930232556rpx;
          margin: 3.488372093023256rpx 0 0 10.465116279069768rpx;
          .text_48 {
            width: 88.95348837209302rpx;
            height: 27.906976744186046rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 20.930232558139537rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
          .text_49 {
            width: 88.95348837209302rpx;
            height: 27.906976744186046rpx;
            overflow-wrap: break-word;
            color: rgba(173, 173, 173, 1);
            font-size: 31.3953488372093rpx;
            font-family: Source Han Sans-Regular;
            font-weight: NaN;
            text-align: left;
            white-space: nowrap;
            line-height: 34.883720930232556rpx;
          }
        }
      }
    }
  }
}
</style>
